<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('可视化')"/>
    <link rel="stylesheet" th:href="@{/pyd/1/css/style.css}">
</head>

<body>
    <!-- 头部模块 -->
    <header>
        <h1><span>中科数据成像管理</span></h1>
        <p><span>Data visualization page design</span></p>
    </header>

    <div class="main">
        <!-- top5 -->
        <div class="top5">
            <div class="top5-title">
                <span>品牌销售TOP5</span>
            </div>
            <div class="top5-content">
                <ul>
                    <li>
                        <div class="cicle"></div>
                        <div class="li-content" id="pp1-1">


                        </div>
                    </li>
                    <li>
                        <div class="cicle"></div>
                        <div class="li-content"  id="pp1-2">

                        </div>
                    </li>
                    <li>
                        <div class="cicle"></div>
                        <div class="li-content"  id="pp1-3">


                        </div>
                    </li>
                    <li>
                        <div class="cicle"></div>
                        <div class="li-content"  id="pp1-4">


                        </div>
                    </li>
                    <li>
                        <div class="cicle"></div>
                        <div class="li-content" id="pp1-5">


                        </div>
                    </li>
                </ul>
            </div>
            <div class="top5-title">
                <span>大类销售分析</span>
            </div>
        </div>
        <!-- 销售总额 -->
        <div class="total">
            <div class="data1">
                <span>年销售</span>
                <p id="pp3-4"></p>
            </div>
            <div class="data2">
                <span>月销售</span>
                <p id="pp3-3"></p>
            </div>
            <div class="data3">
                <span>周销售</span>
                <p id="pp3-2"></p>
            </div>
            <div class="data4">
                <span>日销售</span>
                <p id="pp3-1"></p>
            </div>
            <canvas class="rain"></canvas>
            <canvas class="dashed"></canvas>
            <div class="sphere">
                <div class="sphere-bg"></div>
                <div class="sum">
                    <span>销售总额</span>
                    <p id="pp3-5"></p>
                </div>
            </div>
            <div class="cicle3"></div>
            <div class="cicle4"></div>
            <div class="cicle5"></div>
            <div class="cicle6"></div>
            <div class="cicle7"></div>
            <div class="cicle8">
                <span>89%</span>
                <p>同比</p>
            </div>
            <div class="cicle9">
                <span>89%</span>
                <p>完成率</p>
            </div>
            <div class="cicle10">
                <span>89%</span>
                <p>售罄率</p>
            </div>
            <div class="cicle11">
                <span>89%</span>
                <p>折扣率</p>
            </div>
        </div>
        <!-- 会销分析 -->
        <div class="analyse">
            <div class="analyse-title">
                <span>会销情况分析</span>
            </div>
            <ul th:with="type=${@dict.getType('xiaos_mubiao')}">
                <li>
                    <img th:src="@{/pyd/1/images/s1.png}" alt="">
                    <h5>会销目标</h5><br>
                    <span>Marketing Target</span><br>
                    <em th:each="dict : ${type}" th:text="'￥'+${dict.dictLabel}">￥4,374,266</em>
                </li>
                <li >
                    <img th:src="@{/pyd/1/images/s3.png}" alt="">
                    <h5>会销目标</h5><br>
                    <span>Marketing Target</span><br>

                    <em  th:each="dict : ${type}" th:text="'￥'+${dict.dictLabel}">￥4,374,266</em>
                </li>
                <li>
                    <img th:src="@{/pyd/1/images/s2.png}" alt="">
                    <h5>会销目标</h5><br>
                    <span>Marketing Target</span><br>
                    <em th:each="dict : ${type}" th:text="'￥'+${dict.dictLabel}">￥4,374,266</em>
                </li>
            </ul>
            <div class="execution">
                <div class="title">完成情况</div>
                <div class="cicle1"></div>
                <div class="cicle2"></div>
                <div class="waterChart1">
                    <div class="chart-title">会销完成率</div>
                    <div class="chart1"></div>
                </div>
                <div class="waterChart2">
                    <div class="chart-title">会销占比</div>
                    <div class="chart2"></div>
                </div>
            </div>
        </div>
        <!-- 鞋服配销售分析 -->
        <div class="sale">
            <ul>
                <li >
                    <div class="showImg">
                        <img th:src="@{/pyd/1/images/shoe.png}" alt="">
                    </div>
                    <div class="data" id="pp2-1">
                        <span>鞋类</span>
                    </div>
                    <div class="shoeChart"></div>
                </li>
                <li >
                    <div class="showImg">
                        <img th:src="@{/pyd/1/images/clothes.png}" alt="">
                    </div>
                    <div class="data" id="pp2-2">
                        <span>服装</span>

                    </div>
                    <div class="clothesChart"></div>
                </li>
                <li >
                    <div class="showImg">
                        <img th:src="@{/pyd/1/images/mz.png}" alt="">
                    </div>
                    <div class="data" id="pp2-3">
                        <span>配饰</span>

                    </div>
                    <div class="mzChart"></div>
                </li>
            </ul>
        </div>
        <!-- 折线图 -->
        <div class="lineChart">

        </div>
    </div>

    <!-- 底部模块 -->
    <div class="bottom">
        <h5><span>数据状况</span></h5>
        <p>Data Status</p>
    </div>
</body>
<script th:src="@{/pyd/1/js/jquery-1.11.0.min.js}"></script>
<script th:src="@{/pyd/1/js/echarts.min.js}"></script>
<script th:src="@{/pyd/1/node_modules/echarts-liquidfill/dist/echarts-liquidfill.min.js}"></script>
<script th:src="@{/pyd/1/js/main.js}"></script>
<!--<script th:src="@{/pyd/1/js/pyd1.js}"></script>-->
<th:block th:include="include :: footer" />
<script th:inline="javascript">
   $(function (){

       $.ajax({
           type: "post",
           url: ctx+"ruoyikeshihua/market/keshihuaList",
           data: {},
           success: function(data) {
               console.info(data)
               $.each(data.keshihuaList1,function (index,value){
                   $("#pp1-"+(index+1)).append("<span> &nbsp;"+value.brandName+"</span><span> &nbsp;"+value.commodityPriceShow+"   </span>" +
                       "<span> &nbsp; &nbsp;"+value.brandProportion+" &nbsp;</span><span>    <img src='../../../pyd/1/images/up.png'></span>");

               })
               $.each(data.keshihuaList2,function (index,value){
                   if(value.brandName=="鞋类"){
                       draw('.shoeChart', value.commodityPriceShow, '总量占比', value.count, '#09c4ca')
                       $("#pp2-1").append("<span>"+value.commodityPriceShow+"</span>");
                   }
                   if(value.brandName=="服装"){
                       draw('.clothesChart',  value.commodityPriceShow, '总量占比', value.count, '#09c4ca')
                       $("#pp2-2").append("<span>"+value.commodityPriceShow+"</span>");
                   }
                   if(value.brandName=="配饰"){
                       draw('.mzChart', value.commodityPriceShow, '总量占比', value.count, '#09c4ca')
                       $("#pp2-3").append("<span>"+value.commodityPriceShow+"</span>");
                   }

               })

               $.each(data.keshihuaList3,function (index,value){
                   $("#pp3-"+(index+1)).html(value.commodityPriceShow);
               })
           }
       });
   })
</script>
</html>
